<!-- 场景属性面板组件 -->
<template>
  <div class="scenario-panel">
    <div class="panel-header">
      <h3 class="header-title">
        <el-icon><Setting /></el-icon>
        场景配置
      </h3>
    </div>
    
    <el-tabs v-model="activeTab" class="panel-tabs">
      <!-- 场景属性标签页 -->
      <el-tab-pane label="场景属性" name="scene">
        <div class="tab-content">
          <el-form
            ref="sceneFormRef"
            :model="sceneForm"
            :rules="sceneRules"
            label-position="top"
            class="scene-form"
          >
            <div class="form-section">
              <h4 class="section-title">基本信息</h4>
              <el-form-item label="场景名称" prop="name">
                <el-input
                  v-model="sceneForm.name"
                  placeholder="请输入场景名称"
                  clearable
                />
              </el-form-item>
              
              <el-form-item label="场景描述" prop="description">
                <el-input
                  v-model="sceneForm.description"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入场景描述"
                  maxlength="200"
                  show-word-limit
                />
              </el-form-item>
            </div>
            
            <div class="form-section">
              <h4 class="section-title">时空设置</h4>
              <el-form-item label="场景时间" prop="dateTime">
                <el-date-picker
                  v-model="sceneForm.dateTime"
                  type="datetime"
                  placeholder="选择场景时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
              
              <el-form-item label="地理区域" prop="region">
                <el-select v-model="sceneForm.region" placeholder="选择地理区域" style="width: 100%">
                  <el-option label="东海海域" value="east_sea" />
                  <el-option label="南海海域" value="south_sea" />
                  <el-option label="黄海海域" value="yellow_sea" />
                  <el-option label="渤海海域" value="bohai_sea" />
                  <el-option label="自定义区域" value="custom" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="天气状况" prop="weather">
                <el-select v-model="sceneForm.weather" placeholder="选择天气状况" style="width: 100%">
                  <el-option label="晴朗" value="clear" />
                  <el-option label="多云" value="cloudy" />
                  <el-option label="小雨" value="light_rain" />
                  <el-option label="大雨" value="heavy_rain" />
                  <el-option label="雾霾" value="fog" />
                </el-select>
              </el-form-item>
            </div>
            
            <div class="form-section">
              <h4 class="section-title">电磁环境</h4>
              <el-form-item label="背景噪声级" prop="noiseLevel">
                <el-slider
                  v-model="sceneForm.noiseLevel"
                  :min="-120"
                  :max="-60"
                  :step="5"
                  show-input
                  :format-tooltip="(val) => `${val} dBm`"
                />
              </el-form-item>
              
              <el-form-item label="电磁干扰强度" prop="jamIntensity">
                <el-rate
                  v-model="sceneForm.jamIntensity"
                  :max="5"
                  show-text
                  :texts="['很低', '低', '中等', '高', '很高']"
                />
              </el-form-item>
            </div>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveScene" :loading="saving">
                <el-icon><DocumentAdd /></el-icon>
                保存场景
              </el-button>
              <el-button @click="resetScene">
                <el-icon><RefreshLeft /></el-icon>
                重置
              </el-button>
              <el-button type="success" @click="exportScene">
                <el-icon><Download /></el-icon>
                导出
              </el-button>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      
      <!-- 装备详情标签页 -->
      <el-tab-pane label="装备详情" name="equipment" :disabled="!selectedEquipment">
        <div class="tab-content" v-if="selectedEquipment">
          <div class="equipment-header">
            <div class="equipment-icon">
              <el-icon v-if="selectedEquipment.category === 'radar'"><Monitor /></el-icon>
              <el-icon v-else-if="selectedEquipment.category === 'jammer'"><MagicStick /></el-icon>
              <el-icon v-else-if="selectedEquipment.category === 'ship'"><Ship /></el-icon>
              <el-icon v-else><Aim /></el-icon>
            </div>
            <div class="equipment-title">
              <h4>{{ selectedEquipment.name }}</h4>
              <span class="equipment-id">ID: {{ selectedEquipment.id }}</span>
            </div>
          </div>
          
          <el-form
            ref="equipmentFormRef"
            :model="equipmentForm"
            label-position="top"
            class="equipment-form"
          >
            <div class="form-section">
              <h4 class="section-title">位置信息</h4>
              <el-form-item label="经度">
                <el-input-number
                  v-model="equipmentForm.longitude"
                  :precision="6"
                  :step="0.000001"
                  :min="-180"
                  :max="180"
                  style="width: 100%"
                />
              </el-form-item>
              
              <el-form-item label="纬度">
                <el-input-number
                  v-model="equipmentForm.latitude"
                  :precision="6"
                  :step="0.000001"
                  :min="-90"
                  :max="90"
                  style="width: 100%"
                />
              </el-form-item>
              
              <el-form-item label="高度 (m)">
                <el-input-number
                  v-model="equipmentForm.altitude"
                  :precision="2"
                  :step="1"
                  :min="0"
                  :max="50000"
                  style="width: 100%"
                />
              </el-form-item>
            </div>
            
            <div class="form-section">
              <h4 class="section-title">状态设置</h4>
              <el-form-item label="工作状态">
                <el-select v-model="equipmentForm.status" style="width: 100%">
                  <el-option label="正常工作" value="active" />
                  <el-option label="待机状态" value="standby" />
                  <el-option label="故障停机" value="fault" />
                  <el-option label="维护中" value="maintenance" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="功率等级">
                <el-slider
                  v-model="equipmentForm.powerLevel"
                  :min="0"
                  :max="100"
                  show-input
                  :format-tooltip="(val) => `${val}%`"
                />
              </el-form-item>
            </div>
            
            <div class="form-section" v-if="equipmentSpecialParams">
              <h4 class="section-title">专业参数</h4>
              <div v-for="(param, key) in equipmentSpecialParams" :key="key">
                <el-form-item :label="param.label">
                  <el-input
                    v-model="equipmentForm.specialParams[key]"
                    :placeholder="param.placeholder"
                  />
                </el-form-item>
              </div>
            </div>
            
            <div class="form-actions">
              <el-button type="primary" @click="updateEquipment">
                <el-icon><EditPen /></el-icon>
                更新设备
              </el-button>
              <el-button type="danger" @click="removeEquipment">
                <el-icon><Delete /></el-icon>
                删除设备
              </el-button>
            </div>
          </el-form>
        </div>
        
        <div v-else class="empty-state">
          <el-icon class="empty-icon"><Box /></el-icon>
          <p class="empty-text">请选择装备查看详情</p>
        </div>
      </el-tab-pane>
      
      <!-- 统计信息标签页 -->
      <el-tab-pane label="统计信息" name="statistics">
        <div class="tab-content">
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon radar">
                <el-icon><Monitor /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.radarCount }}</div>
                <div class="stat-label">雷达设备</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon jammer">
                <el-icon><MagicStick /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.jammerCount }}</div>
                <div class="stat-label">干扰设备</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon platform">
                <el-icon><Ship /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.platformCount }}</div>
                <div class="stat-label">平台载具</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon route">
                <el-icon><Guide /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.routeCount }}</div>
                <div class="stat-label">规划路径</div>
              </div>
            </div>
          </div>
          
          <div class="coverage-info">
            <h4 class="section-title">覆盖范围分析</h4>
            <div class="coverage-chart" ref="coverageChartRef">
              <!-- 这里可以集成ECharts图表 -->
              <div class="chart-placeholder">
                <el-icon><TrendCharts /></el-icon>
                <p>覆盖范围图表</p>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Setting,
  Monitor,
  MagicStick,
  Ship,
  Aim,
  DocumentAdd,
  RefreshLeft,
  Download,
  EditPen,
  Delete,
  Box,
  Guide,
  TrendCharts
} from '@element-plus/icons-vue'

const props = defineProps({
  selectedEquipment: {
    type: Object,
    default: () => null
  },
  deployedEquipment: {
    type: Array,
    default: () => []
  },
  routeCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['updateEquipment', 'removeEquipment', 'saveScene'])

const activeTab = ref('scene')
const saving = ref(false)

// 场景表单数据
const sceneForm = ref({
  name: '默认电磁场景',
  description: '这是一个电磁对抗训练场景',
  dateTime: new Date(),
  region: 'east_sea',
  weather: 'clear',
  noiseLevel: -90,
  jamIntensity: 2
})

// 装备表单数据
const equipmentForm = ref({
  longitude: 0,
  latitude: 0,
  altitude: 0,
  status: 'active',
  powerLevel: 80,
  specialParams: {}
})

// 表单验证规则
const sceneRules = {
  name: [
    { required: true, message: '请输入场景名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入场景描述', trigger: 'blur' }
  ],
  dateTime: [
    { required: true, message: '请选择场景时间', trigger: 'change' }
  ],
  region: [
    { required: true, message: '请选择地理区域', trigger: 'change' }
  ]
}

// 统计信息
const statistics = computed(() => ({
  radarCount: props.deployedEquipment.filter(eq => eq.category === 'radar').length,
  jammerCount: props.deployedEquipment.filter(eq => eq.category === 'jammer').length,
  platformCount: props.deployedEquipment.filter(eq => ['ship', 'aircraft'].includes(eq.category)).length,
  routeCount: props.routeCount
}))

// 装备专业参数
const equipmentSpecialParams = computed(() => {
  if (!props.selectedEquipment) return null
  
  const paramMap = {
    radar: {
      frequency: { label: '工作频率', placeholder: '例如: 2-4GHz' },
      power: { label: '发射功率', placeholder: '例如: 100kW' },
      range: { label: '探测距离', placeholder: '例如: 200km' }
    },
    jammer: {
      frequency: { label: '干扰频段', placeholder: '例如: VHF/UHF' },
      power: { label: '干扰功率', placeholder: '例如: 500W' },
      bandwidth: { label: '带宽', placeholder: '例如: 100MHz' }
    },
    ship: {
      speed: { label: '最大航速', placeholder: '例如: 30节' },
      displacement: { label: '排水量', placeholder: '例如: 8000吨' }
    },
    aircraft: {
      speed: { label: '最大速度', placeholder: '例如: 马赫2.0' },
      ceiling: { label: '升限', placeholder: '例如: 15000m' }
    }
  }
  
  return paramMap[props.selectedEquipment.category] || null
})

// 监听选中装备变化
watch(() => props.selectedEquipment, (newEquipment) => {
  if (newEquipment && newEquipment.coordinates) {
    equipmentForm.value = {
      longitude: newEquipment.coordinates[0] || 0,
      latitude: newEquipment.coordinates[1] || 0,
      altitude: newEquipment.coordinates[2] || 0,
      status: newEquipment.status || 'active',
      powerLevel: newEquipment.powerLevel || 80,
      specialParams: newEquipment.specialParams || {}
    }
    activeTab.value = 'equipment'
  }
}, { immediate: true })

const saveScene = async () => {
  saving.value = true
  try {
    // 这里可以添加保存逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
    emit('saveScene', sceneForm.value)
    ElMessage.success(`场景 "${sceneForm.value.name}" 已保存`)
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

const resetScene = () => {
  sceneForm.value = {
    name: '默认电磁场景',
    description: '这是一个电磁对抗训练场景',
    dateTime: new Date(),
    region: 'east_sea',
    weather: 'clear',
    noiseLevel: -90,
    jamIntensity: 2
  }
  ElMessage.info('场景已重置')
}

const exportScene = () => {
  const sceneData = {
    scene: sceneForm.value,
    equipment: props.deployedEquipment,
    timestamp: new Date().toISOString()
  }
  
  const dataStr = JSON.stringify(sceneData, null, 2)
  const blob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  
  const link = document.createElement('a')
  link.href = url
  link.download = `${sceneForm.value.name}_${Date.now()}.json`
  link.click()
  
  URL.revokeObjectURL(url)
  ElMessage.success('场景已导出')
}

const updateEquipment = () => {
  if (!props.selectedEquipment) return
  
  const updatedEquipment = {
    ...props.selectedEquipment,
    coordinates: [
      equipmentForm.value.longitude,
      equipmentForm.value.latitude,
      equipmentForm.value.altitude
    ],
    status: equipmentForm.value.status,
    powerLevel: equipmentForm.value.powerLevel,
    specialParams: equipmentForm.value.specialParams
  }
  
  emit('updateEquipment', updatedEquipment)
  ElMessage.success('装备信息已更新')
}

const removeEquipment = async () => {
  if (!props.selectedEquipment) return
  
  try {
    await ElMessageBox.confirm(
      `确定要删除装备 "${props.selectedEquipment.name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    emit('removeEquipment', props.selectedEquipment)
    ElMessage.success('装备已删除')
  } catch {
    // 用户取消删除
  }
}
</script>

<style scoped>
.scenario-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 1.2vh 1.5vw;
  border-bottom: 1px solid #2d3a4b; /* 深色边框 */
  background: linear-gradient(135deg, #1f2d3d, #263445); /* 深色渐变 */
}

.header-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #409EFF; /* 统一主题色 */
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.panel-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
}

.tab-content {
  height: 100%;
  padding: 1.5vh 1.5vw;
  overflow-y: auto;
  background: #263445; /* 深色背景 */
}

.form-section {
  margin-bottom: 2.5vh;
  padding: 1.5vh;
  background: #1f2d3d; /* 深色背景 */
  border-radius: 0.8vh;
  border-left: 0.3vw solid #409EFF; /* 主题色左边框 */
}

.section-title {
  margin: 0 0 1.5vh 0;
  font-size: 1rem;
  font-weight: 500;
  color: #bfcbd9; /* 深色主题文字 */
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.scene-form .el-form-item {
  margin-bottom: 1.8vh;
}

.form-actions {
  display: flex;
  gap: 1vw;
  padding-top: 2vh;
  border-top: 1px solid #2d3a4b; /* 深色边框 */
}

.form-actions .el-button {
  flex: 1;
  height: 4vh;
}

.equipment-header {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1.5vh;
  background: #1f2d3d; /* 深色背景 */
  border-radius: 0.8vh;
  margin-bottom: 2vh;
}

.equipment-icon {
  width: 4vw;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(64, 158, 255, 0.2); /* 半透明主题色背景 */
  border-radius: 50%;
  font-size: 2rem;
  color: #409EFF; /* 主题色 */
}

.equipment-title h4 {
  margin: 0 0 0.5vh 0;
  font-size: 1.2rem;
  color: #bfcbd9; /* 深色主题文字 */
}

.equipment-id {
  font-size: 0.8rem;
  color: #8591a3; /* 深色主题次要文字 */
  font-family: 'Monaco', 'Consolas', monospace;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30vh;
  color: #8591a3; /* 深色主题次要文字 */
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1vh;
  opacity: 0.5;
}

.empty-text {
  font-size: 1rem;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5vh;
  margin-bottom: 3vh;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1.5vh;
  background: #1f2d3d; /* 深色背景 */
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b; /* 深色边框 */
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: #409EFF; /* 主题色边框 */
  box-shadow: 0 0.4vh 1.2vh rgba(64, 158, 255, 0.3); /* 加深阴影 */
}

.stat-icon {
  width: 3vw;
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.5rem;
}

.stat-icon.radar {
  background: rgba(64, 158, 255, 0.2); /* 半透明主题色背景 */
  color: #409EFF; /* 主题色 */
}

.stat-icon.jammer {
  background: rgba(230, 162, 60, 0.2); /* 半透明警告色背景 */
  color: #E6A23C; /* 警告色 */
}

.stat-icon.platform {
  background: rgba(103, 194, 58, 0.2); /* 半透明成功色背景 */
  color: #67C23A; /* 成功色 */
}

.stat-icon.route {
  background: rgba(144, 147, 153, 0.2); /* 半透明信息色背景 */
  color: #909399; /* 信息色 */
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: #bfcbd9; /* 深色主题文字 */
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  color: #8591a3; /* 深色主题次要文字 */
  margin-top: 0.5vh;
}

.coverage-info {
  background: #1f2d3d; /* 深色背景 */
  border-radius: 0.8vh;
  padding: 1.5vh;
}

.coverage-chart {
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #263445; /* 深色背景 */
  border-radius: 0.6vh;
  border: 1px dashed #2d3a4b; /* 深色破折线边框 */
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8591a3; /* 深色主题次要文字 */
}

.chart-placeholder .el-icon {
  font-size: 3rem;
  margin-bottom: 1vh;
  opacity: 0.5;
}

.chart-placeholder p {
  margin: 0;
  font-size: 0.9rem;
}

/* Element Plus 组件深色主题覆盖 */
:deep(.el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-input__inner) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

:deep(.el-textarea__inner) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  box-shadow: none !important;
}

:deep(.el-textarea) {
  background: #263445 !important;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409EFF !important;
  box-shadow: 0 0 0 1px #409EFF !important;
}

:deep(.el-select) {
  background: #263445 !important;
}

:deep(.el-select .el-input) {
  background: #263445 !important;
}

:deep(.el-select .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-select .el-input__inner) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-select__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
}

:deep(.el-date-editor .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-date-editor .el-input__inner) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

:deep(.el-input-number .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-input-number .el-input__inner) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

:deep(.el-slider__runway) {
  background: #2d3a4b !important;
}

:deep(.el-slider__bar) {
  background: #409EFF !important;
}

:deep(.el-slider__button) {
  background: #409EFF !important;
  border-color: #409EFF !important;
}

:deep(.el-rate__text) {
  color: #bfcbd9 !important;
}

:deep(.el-input__inner::placeholder),
:deep(.el-textarea__inner::placeholder) {
  color: #8591a3 !important;
}

:deep(.el-input__wrapper:focus),
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}

/* 已在上面合并 */

/* 更强的选择器覆盖 */
:deep(.el-select:hover .el-input__wrapper) {
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-select.is-focused .el-input__wrapper) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}

:deep(.el-select__suffix) {
  color: #8591a3 !important;
}

:deep(.el-select__suffix .el-icon) {
  color: #8591a3 !important;
}

:deep(.el-select__suffix .el-icon:hover) {
  color: #409EFF !important;
}
</style>